<template>
  <!-- 基础配置页面 -->
  <div>
    <el-button type="primary" @click="SystemInfo">添加</el-button>
    <div>
      <!-- 表单 -->
      <el-table :data="systemInfoData" style="width: 100%">
        <el-table-column prop="id" label="id" align="center"> </el-table-column>
        <el-table-column prop="name" label="名称" align="center">
        </el-table-column>
        <el-table-column prop="val" label="值" align="center" width="150px">
          <template slot-scope="scope">
            <el-image :src="scope.row.val">
              <div slot="error" class="image-slot">
                <span>{{ scope.row.val }}</span>
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="introduce" label="介绍" align="center">
        </el-table-column>
        <el-table-column prop="date" label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="upSystem(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="text"
              size="small"
              style="color : red"
              @click="delectSystemInfo(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 模态框 -->
    <el-dialog :title="dialogFormTitle" :visible.sync="dialogFormVisible">
      <el-form :model="systemInfoform" :rules="rules" ref="ruleForm">
        <!-- 名字 -->
        <el-form-item label="名字" prop="name">
          <el-input v-model="systemInfoform.name" autocomplete="off"></el-input>
        </el-form-item>
        <!-- 介绍 -->
        <el-form-item label="介绍" prop="introduce">
          <el-input
            v-model="systemInfoform.introduce"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <!-- 类型 -->
        <el-form-item label="类型" prop="type">
          <el-select v-model="systemInfoform.type" placeholder="请选择类型">
            <el-option label="文字" value="1"></el-option>
            <el-option label="图片" value="2"></el-option>
          </el-select>
        </el-form-item>
        <!-- 值 -->
        <!-- 文字 -->
        <el-form-item label="值" v-if="systemInfoform.type == '1'">
          <el-input v-model="systemInfoform.val" autocomplete="off"></el-input>
        </el-form-item>
        <!-- 图片 -->
        <el-form-item label="图片上传" v-if="systemInfoform.type == '2'">
          <el-upload
            class="avatar-uploader"
            :action="uploadFileURL"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="systemInfoform.val" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSystemInfo">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { get, post } from "@/utils/request";
//引入文件上传路径 和文件预览的路径
import { showFileURL, uploadFileURL } from "@/utils/config";
export default {
  data() {
    return {
      //系统信息数组
      systemInfoData: [],
      // 系统信息表单
      systemInfoform: {
        type: "1",
      },
      // 模态框是否显示
      dialogFormVisible: false,
      // 模态框的标题
      dialogFormTitle: "",
      imageUrl: "",
      // 图片上传地址
      uploadFileURL,
      //表单验证
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        introduce: [{ required: true, message: "请输入介绍", trigger: "blur" }],
      },
    };
  },
  computed: {},
  methods: {
    //查询所有信息
    async getSystemInfo() {
      let res = await get("/baseConfig/findAll");
      this.systemInfoData = res.data;

      console.log(res);
    },
    // 打开添加系统信息模态框
    SystemInfo() {
      this.dialogFormTitle = "新增基础配置";
      this.systemInfoform = { type: "1" };
      this.dialogFormVisible = true;
      this.$refs["ruleForm"].resetFields();
    },
    //添加或修改系统信息
    addSystemInfo() {
      this.$refs["ruleForm"].validate(async (valid) => {
        if (valid) {
          // 发送表单验证的请求，提交表单对象
          let res = await post("/baseConfig/saveOrUpdate", this.systemInfoform);
          // 给用户一个成功的提示
          if (res.status == 200) {
            this.$message({
              message: res.message,
              type: "success",
            });
          }
          // 刷新页面
          this.getSystemInfo();
          //  调用关闭模态框的方法
          this.dialogFormVisible = false;
        } else {
          console.log("error submit!!");
        }
      });
    },
    // 打开修改系统信息模态框
    upSystem(data) {
      this.dialogFormTitle = "修改基础配置";
      this.systemInfoform = { ...this.systemInfoform, ...data };
      console.log(this.systemInfoform);
      let str = "http://121.199.29.84:8888";
      this.systemInfoform.type = "1";
      if (!this.systemInfoform.val.search(str)) {
        this.systemInfoform.type = "2";
        this.imageUrl = "1";
      }
      this.dialogFormVisible = true;
      this.$refs["ruleForm"].resetFields();
    },
    // 删除系统信息
    async delectSystemInfo(id) {
      let res = await get("/baseConfig/deleteById", { id });
      // 给用户一个成功的提示
      if (res.status == 200) {
        this.$message({
          message: res.message,
          type: "success",
        });
        // 刷新页面
        this.getSystemInfo();
      }
    },
    // 上传成功后回调的
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.systemInfoform.val = showFileURL + res.data.id;
    },
    // 图片上传前
    beforeAvatarUpload(file) {
      const isLt3M = file.size / 1024 / 1024 < 3;
      if (!isLt3M) {
        this.$message.error("上传头像图片大小不能超过 3MB!");
      }
    },
  },
  created() {
    this.getSystemInfo();
  },
  mounted() {},
};
</script>
<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>